<template>
  <el-breadcrumb>
    <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    <el-breadcrumb-item>网格员管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-form
      :inline="true"
      :model="queryForm"
      size="small"
      style="margin-top: 20px"
      class="demo-form-inline"
  >
    <el-form-item label="Id">
      <el-input
          v-model="queryForm.gmId"
          placeholder="请输入ID"
          style="width: 100px"
      />
    </el-form-item>

    <el-form-item label="姓名">
      <el-input
          v-model="queryForm.gmName"
          placeholder="请输入名字"
          style="width: 100px"
      />
    </el-form-item>
    <el-form-item label="编号">
      <el-input
          v-model="queryForm.gmCode"
          placeholder="请输入编号"
          style="width: 100px"
      />
    </el-form-item>
    <el-form-item label="电话">
      <el-input
          v-model="queryForm.tel"
          placeholder="请输入电话"
          style="width: 100px"
      />
    </el-form-item>
    <el-form-item label="省">
      <el-select
          v-model="queryForm.provinceId"
          @change="changeProvince"
          placeholder="请选择省"
          style="width: 100px"
      >
        <el-option
            :label="province.provinceName"
            :value="province.provinceId"
            v-for="province in provinceArr"
            :key="province.provinceId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="市">
      <el-select
          v-model="queryForm.cityId"
          placeholder="请选择市"
          style="width: 100px"
      >
        <el-option
            :label="city.cityName"
            :value="city.cityId"
            v-for="city in cityArrToProvince"
            :key="city.cityId"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="danger" @click="clear">清空</el-button>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>

    <el-form-item label="">
      <!--点击之后立即查询-->
      <el-radio-group v-model="queryForm.state" @change="query">
        <el-radio label="0">工作状态</el-radio>
        <el-radio label="1">非工作状态</el-radio>
        <el-radio label="2">其他</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>

  <el-table
      :data="pageResponseDto.list"
      style="width: 100%"
      :cell-style="{ padding: '4px' }"
      empty-text="无数据"
  >
    <el-table-column prop="gmId" label="Id" width="150" />
    <el-table-column prop="gmName" label="姓名" />
    <el-table-column prop="gmCode" label="编号" />
    <el-table-column prop="password" label="密码" />
    <el-table-column prop="provinceId" label="省区域" :formatter="formatProvince"/>
    <el-table-column prop="cityId" label="市区域" :formatter="formatCity"/>
    <el-table-column prop="tel" label="电话" />
    <el-table-column prop="state" label="状态" :formatter="formatState" />
    <el-table-column prop="remarks" label="备注" />

    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="updateMember(scope.row.gmId)">
          <el-icon title="更新员工" style="font-size: 18px">
            <Edit />
          </el-icon>
        </el-button>
        <el-button link type="primary" size="small" @click="addRemarks(scope.row.gmId)">
          <el-icon title="评价员工" style="font-size: 18px">
            <Star/>
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
        background
        small
        layout="prev, pager, next, total"
        :total="pageResponseDto.totalRow"
        :page-size="pageResponseDto.maxPageNum"
        style="margin-top: 20px"
        v-model:current-page="pageNum"
    />
  </div>
</template>
<script setup>
import { Star, Edit } from "@element-plus/icons-vue";
import { reactive, ref, inject, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const axios = inject("axios");

const queryForm = reactive({
  gmId: null,
  gmName: null,
  gmCode: null,
  password: null,
  provinceId: null,
  cityId: null,
  tel: null,
  state: null,
  remarks: null,
});

const provinceArr = ref([]);
const cityArrToProvince = ref([]);
const allCityArr = ref([]);
const pageResponseDto = ref({});

// 初始化成员列表
const listSupervisorPage = (pageNum) => {
  let param = {
    gmId: queryForm.gmId,
    gmName: queryForm.gmName,
    gmCode: queryForm.gmCode,
    password: queryForm.password,
    provinceId: queryForm.provinceId,
    cityId: queryForm.cityId,
    tel: queryForm.tel,
    state: queryForm.state,
    remarks: queryForm.remarks,
    pageNum: pageNum,
    maxPageNum: store.state.maxPageNum,
  };
  axios
      .post("gridMember/listGridMemberPage", param)
      .then((response) => {
        pageResponseDto.value = response.data;
        console.log(pageResponseDto.value);
      })
      .catch((error) => {
        console.error("Error:", error); // 打印错误信息
      });
};

// 在分页组件上使用双向绑定 pageNum 数据，然后监听 pageNum
const pageNum = ref(1);
watch(pageNum, (newValue, oldValue) => {
  listSupervisorPage(newValue);
});

// 格式化状态
const formatState = (row, column, cellValue) => {
  if (cellValue == 0) return "工作状态";
  else if (cellValue == 1) return "非工作状态";
  else return "其他";
};
const formatProvince = (row, column, cellValue) => {
  const province = provinceArr.value.find(p => p.provinceId === cellValue);
  return province ? province.provinceName : '未知省份';
};

const formatCity = (row, column, cellValue) => {
  const city = allCityArr.value.find(c => c.cityId === cellValue);
  return city ? city.cityName : '未知城市';
};
// 初始化省
const listGridProvinceAll = () => {
  axios
      .post("gridProvince/listGridProvinceAll")
      .then((response) => {
        provinceArr.value = response.data;
        provinceArr.value.unshift({
          provinceId: null,
          provinceName: "-- 全部 --",
        });
      })
      .catch((error) => {
        console.error("Error:", error);
      });
};
// 初始化所有城市
const listGridCityAll = () => {
  axios
      .post("gridCity/listGridCityAll")
      .then((response) => {
        allCityArr.value = response.data;
        // provinceArr.value.unshift({
        //   provinceId: null,
        //   provinceName: "-- 全部 --",
        // });
        // if (provinceArr.value.length > 1) {
        //   queryForm.provinceId = provinceArr.value[1].provinceId;
        //   listGridCityByProvinceId(provinceArr.value[1].provinceId);
        // }
      })
      .catch((error) => {
        console.error("Error:", error);
      });
};
// 根据省 ID 查询市
const listGridCityByProvinceId = (provinceId) => {
  axios
      .post("gridCity/listGridCityByProvinceId", {
        provinceId: provinceId,
      })
      .then((response) => {
        cityArrToProvince.value = response.data;
        cityArrToProvince.value.unshift({
          cityId: null,
          cityName: "-- 全部 --",
        });
      })
      .catch((error) => {
        console.error("Error:", error);
      });
};

// 省下拉框变化时更新市下拉框
const changeProvince = () => {
  listGridCityByProvinceId(queryForm.provinceId);
};

// 初始化
const init = () => {
  listGridProvinceAll(); // 初始化省
  listGridCityAll();//初始化所有市，不是该省的市
  listSupervisorPage(1); // 初始化成员列表
};
init();

// 清空查询表单
const clear = () => {
  queryForm.gmId = null;
  queryForm.gmName = null;
  queryForm.gmCode = null;
  queryForm.password = null;
  queryForm.provinceId = null;
  queryForm.cityId = null;
  queryForm.tel = null;
  queryForm.remarks = null;
  queryForm.state = null;
};

// 查询
const query = () => {
  listSupervisorPage(1);
};

// 跳转到更新员工页面
const updateMember = (gmId) => {
  router.push({ path: "/index/gridMemberUpdate", query: { gmId: gmId } });
};

// 跳转到评价员工页面
const addRemarks = (gmId) => {
  router.push({ path: "/index/gridMemberRemarks", query: { gmId: gmId } });
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
</style>